<template>
  <view>
    <view class="content">
      <view class="con_body">
        <view class="body">
          <view class="con_text" @click="getNav('rideHistory')">
            <image src="../../static/icon/ride.png"></image>
            <text>骑行历史</text>
            <label>></label>
          </view>
          <view class="con_text" @click="getNav('alertHistory')">
            <image src="../../static/icon/alert.png"></image>
            <text>警报记录</text>
            <label>></label>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="con_body_tow">
        <view class="con_text" @click="getNav('aboutUs')">
          <image src="../../static/icon/aboutus.png"></image>
          <text>关于我们</text>
          <label>></label>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="con_body_tow">
        <view class="body">
          <view class="con_text">
            <image src="../../static/icon/service.png"></image>
            <text>联系客服</text>
            <label>></label>
          </view>
          <view class="con_text">
            <image src="../../static/icon/feedback.png"></image>
            <text>意见反馈</text>
            <label>></label>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="bottom">
        <view class="signOut">
          <button
            class="button_1"
            :class="{ button_2: !is_login }"
            @click="signOut"
            :disabled="!is_login"
          >
            退出登录
          </button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "content",
  props: {
    is_login: Boolean,
  },
  data() {
    return {};
  },
  methods: {
    // 跳转到具体页面
    getNav(nav) {
      // uni.navigateTo({
      //   url: "/pages/mine/" + nav,
      //   fail: (err) => {
      //     console.log(err);
      //   },
      // });
      if (this.is_login) {
        console.log(nav);
        uni.navigateTo({
          url: "/pages/mine/" + nav,
          fail: (err) => {
            console.log(err);
          },
        });
      } else {
        uni.showToast({
          icon: "none",
          title: "尚未登录，请先登录！",
          duration: 2500,
          success: (res) => {
            // setTimeout(() => {
            //   uni.reLaunch({
            //     url: `/pages/mine/mine`,
            //     fail: (err) => {
            //       console.log(err);
            //     },
            //     success() {
            //       console.log("switchTab success");
            //       // beforePage.onLoad();
            //     },
            //   });
            // }, 1000);
          },
        });
      }
    },
    // 退出登录
    signOut() {
      const that = this;
      uni.showModal({
        title: "提醒",
        content: "确定退出当前登录状态?",
        success: (res) => {
          if (res.confirm) {
            uni.removeStorage({
              key: "userInfo",
              success: () => {
                uni.removeStorage({
                  key: "token",
                  success: () => {
                    // 刷新页面
                    uni.reLaunch({
                      url: "/pages/mine/mine",
                      success: () => {
                        uni.showToast({
                          icon: "success",
                          title: "已退出登录！",
                          duration: 1500,
                        });
                      },
                      fail: (err) => {
                        console.log(err);
                      },
                    });
                  },
                  fail: (err) => {
                    console.log(err);
                  },
                });
              },
              fail: (err) => {
                console.log(err);
              },
            });
          }
        },
      });
    },
  },
};
</script>
  
<style lang="scss" scoped>
.content {
  width: 100%;
  background-color: #fff;
  border-radius: 30rpx;

  .con_body {
    margin: 20rpx 40rpx 0;
  }
  .con_body_tow {
    margin: 10rpx 40rpx;
  }
  .con_text {
    position: relative;
    display: flex;
    align-items: center;
    padding: 26rpx 0;

    image {
      width: 60rpx;
      height: 60rpx;
    }
    text {
      padding-left: 30rpx;
      font-size: 34rpx;
      color: #595959;
      letter-spacing: 4rpx;
    }
    label {
      font-size: 38rpx;
      color: #bdbbbb;
      position: absolute;
      // float: right;
      right: 0;
    }
  }
  .bottom {
    margin-top: 20rpx;
    border-bottom: 20rpx solid aliceblue;
    .signOut {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2rpx solid aliceblue;
      .button_1 {
        width: 98%;
        padding: 20rpx 0;
        font-size: 34rpx;
        font-weight: bold;
        color: #fd5050;
        letter-spacing: 4rpx;
        border: none;
      }
      .button_2 {
        width: 98%;
        padding: 20rpx 0;
        font-size: 34rpx;
        font-weight: bold;
        color: #fd5050;
        letter-spacing: 4rpx;
        opacity: 0.3;
        border: none;
      }
    }
  }
}
</style>